<template>
  <div class="pk-login"> 
    <pk-dialog :footer="false" @onClose="onClose" @confirm="confirm" width="420px" :show-close="colseBtn">
      <div class="pk-login-info">
        <div class="pk-login-title">
          手机号登录
          <div class="pk-login-ink" style="left: 0; width: 80px;"></div>
        </div>
        <div class="mt-24">
          <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            :rules="rules"
            label-width="auto"
            class="demo-ruleForm"
            :size="formSize"
            status-icon
          >
          <el-form-item  prop="phone">
              <el-input
                v-model="ruleForm.phone"
                placeholder="请输入手机号码"
                class="input-with-select"
                size="large"
              >
                <template #prepend>
                  +86
                </template>
              </el-input>
            </el-form-item>
            <el-form-item>
              <div class="flex-row" style="width: 100%;">
                <div class="flex-1 mr-12">
                   <el-input
                    v-model="ruleForm.verify_code" 
                    :disabled="ruleForm.phone.length!=11"
                    size="large"
                    placeholder="请输入验证码"
                    clearable
                  />
                </div>
                <div >
                  <el-button @click="sendBtn" type="primary" size="large" :disabled="ruleForm.phone.length!=11 && num!=60">
                    {{ codeText }}
                  </el-button>
                </div>
              </div>
            </el-form-item>
            <el-form-item>
              <div class="f-12 pk-login-tip">登录视为您已阅读并同意伯乐聘<span class="color-blur">
                <a href="https://static.bytesbay.cn/policies/zh-CN/bolepin-terms-of-user.html" target="_blank">用户协议</a>
              </span>和<span class="color-blur">
                <a href="https://static.bytesbay.cn/policies/zh-CN/bolepin-privacy-policy.html" target="_blank">隐私政策</a> 
                </span></div>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="large" style="width: 100%;" @click="submitForm">登录注册</el-button>
             </el-form-item>
          </el-form>
        </div>
      </div>
    </pk-dialog>
  </div>
</template>

<script setup>
import { getVerifyCode, authLogin, getUserInfo } from '@/api/api'
import { reactive, ref, defineEmits, onMounted, defineProps } from 'vue';
import pkDialog from '@/components/pkui/pkdialog/pkdialog.vue'
const emits = defineEmits(["onClose", "confirm"])
import { getToken, setKeyItem} from '@/utils/auth'
import { useSideStore } from '@/store/state'
import { useRouter } from 'vue-router'
const router = useRouter();
const counterStore = useSideStore()
const ruleFormRef = ref(null)
const ruleForm = reactive({
  phone: '',
  telicon: '+86'
})
const codeText = ref('获取验证码')
const num = ref(60)
const timer = ref(null)
const props = defineProps({
  loginType: {
    type:[String,Number],
    default: 0
  }
})
const colseBtn = ref(true)
const onClose = () => {
  emits('onClose')
}

const confirm = (e) => {
  emits('confirm', e)
}

const validatePass = (rule, value, callback) => {
  const phoneRegex = /^1[3-9]\d{9}$/;
  if (ruleForm.phone == '') {
    callback(new Error('请输入手机号码'))
  } else {
    if(!phoneRegex.test(ruleForm.phone)){
      callback(new Error('手机号码格式不正确'))
      return
    } 
    callback()
  }
}

const rules = reactive({
  phone:[
    {validator: validatePass, trigger: 'blur' }
  ]
})

const submitForm = () => {
  ruleFormRef.value.validate((valid) => {
    if (valid) {
      authLogin({
        pattern: 'sms',
        phone: ruleForm.telicon + "" + ruleForm.phone,
        verify_code: ruleForm.verify_code
      }).then(res => {
        if (res.code === 1000) { 
          counterStore.SETUSERINFO(res.data)
          setKeyItem('bytesbayToken', res.data.token)
          counterStore.SETTOKEN(res.data.token)
          counterStore.SETLOGINSHOW(false)
          confirm(res.data) 
          getUserInfoItem()
        } 
      })
    } 
  })
}

const getUserInfoItem = () => {
  getUserInfo().then(res => {
    if (res.code == 1000 ) {
      setKeyItem("userInfo", JSON.stringify(res.data))
      if (props.loginType == 0) {
        window.location.reload()
      }
    }
  })
}

const sendBtn = () => {
  getVerifyCode({
    phone: ruleForm.telicon + "" + ruleForm.phone,
    geo:'cn'
  }).then(res => {
    if (res.code === 1000) {
      timer.value = setInterval(() => {
        startTime()
      }, 1000)
    } 
  })
}


const startTime = () => {
  if (num.value > 0) {
    num.value--
    codeText.value = `已发 ${num.value} S`
  } else {
    timer.value && clearInterval(timer.value)
    num.value = 60
    codeText.value = '获取验证码'
  }
}


onMounted(() => {
  if(router.currentRoute.value.path.indexOf('agents') == -1){
    colseBtn.value = false
  }


})

</script>

<style lang="scss" scoped>
.pk-login{
  position: fixed;
  top:0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba($color: #000, $alpha: .2);
  backdrop-filter: blur(1px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  &-info{
    min-height: 200px;
    background: #fff;
    border-radius: 12px;
    padding: 8px;
  }
  &-title{
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
    color: rgb(22, 100, 255);
    position: relative;
    padding-bottom: 8px;
  }
  &-title:before{
    bottom: 0;
    content: "";
    left: -8px;
    opacity: 1;
    position: absolute;
    right: -8px;
    top: 0;
    transition: all .2s linear;
    z-index: -1;
    border-radius:4px
  }
  &-ink{
    height: 2px;
    position: absolute;
    right: auto;
    bottom: 0px;
    background-color: rgb(22, 100, 255)
  }
  &-tip{
    color: #41464f;
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    margin-bottom: 4px;
  }
}

@media screen and (max-width: 500px) {
  ::v-deep .el-dialog {
    width: 90%!important;
  }
}
</style>